<template>
  <div class="popContainer" v-show="props.dialogVisible">
    <div class="boxcontain" :style="{ 'width': props.width + 'px' }">
      <div class="headerbox">
        <div class="leftheader">
          <slot name="header"></slot>
        </div>
        <el-icon @click="handleClose" class="rightbtn">
          <close-bold />
        </el-icon>
      </div>
      <slot></slot>
    </div>
  </div>
</template>
<script setup>
import { defineEmits } from 'vue'
const props = defineProps({
  dialogVisible: { type: Boolean },
  width: { type: Number }
})
const emit = defineEmits(['hideDialog'])
const handleClose = () => {
  emit("hideDialog", false)
}
</script>
<style lang="scss" scoped>
.popContainer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.5);

  .boxcontain {
    height: auto;
    border-radius: 5px;
    margin: 150px auto;
    background: #ffffff;
    position: relative;
    .headerbox {
      width: 100%;
      .leftheader {
        width: 100%;
        padding: 20px 0 20px 0;
        text-align: center;
        font-size: 20px;
        float: left;
        font-weight: bolder;
        position: absolute;
      }
      .el-icon {
        width: 50px;
        font-size: 18px;
        color: #e5e2e2;
        cursor: pointer;
        z-index: 1000;
        position: absolute;
        right: 20px;
        top: 25px;
      }
    }

    .el-icon:hover {
      color: #e7e7e7;
    }
  }
}
</style>
